<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑功能</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/quanXianGuanLi/accountDetails.js"></script>
    <script src="../../javaScript/quanXianGuanLi/date.js"></script>
    <script src="../../javaScript/quanXianGuanLi/renYuanShuJu.js"></script>

    <style>
        body {
            background-color: #F2F2F2;
        }
        
        .container {
            width: 1200px;
            line-height: 80px;
            background-color: white;
            border-radius: 2px;
            margin-top: 10px;
            padding: 30px 60px;
        }
        
        .container>.row {
            height: 60px;
            line-height: 60px;
        }
        
        .container>h2>span {
            font-size: 16px;
            cursor: pointer;
        }
        
        .container>h2>span:hover {
            color: #0099FF;
        }
        
        .input_title {
            text-align: right;
        }
        
        .input_title>span {
            text-align: justify;
            text-align-last: justify;
            display: inline-block;
            width: 80%;
        }
        
        .inputs {
            width: 400px;
            height: 40px;
            line-height: 40px;
            text-align: left;
        }
        
        .caret {
            margin-top: 18px;
        }
        
        .icon-anniu_kaiqi,
        .icon-anniu_guanbi {
            font-size: 40px;
            cursor: pointer;
        }
        
        .icon-anniu_kaiqi {
            color: #0099FF;
        }
        
        .icon-anniu_guanbi {
            display: none;
            color: gray;
        }
        
        .submit {
            /* 确定按钮 */
            background-color: #0099FF;
            color: white;
            border: 0;
            width: 125px;
            height: 45px;
            line-height: 43px;
            border-radius: 2px;
            margin-right: 20px;
        }
        
        .cancel {
            /* 取消按钮 */
            width: 125px;
            height: 45px;
            line-height: 41px;
            border-radius: 2px;
            border: 1px gray solid;
            background-color: white;
        }
        /* 三级下拉 */
        
        .content_left {
            margin-left: 20px;
            float: left;
        }
        
        .content_right {
            float: right;
            margin-right: 60px;
        }
        
        .content {
            background-color: white;
            font-size: 16px;
            position: relative;
            border: 1px solid #CCCCCC;
            position: absolute;
            top: 34px;
            z-index: 999;
            background-color: #FFFFFF;
            display: none;
            cursor: pointer;
            margin-left: 15px;
            margin-top: 11px;
        }
        
        .content>ul {
            padding: 0;
        }
        
        .content>ul>li {
            background-color: white;
            width: 190px;
            height: 45px;
            margin: 0;
            list-style: none;
        }
        
        .content>ul>li>span>span {
            margin-left: 80px;
            color: #999;
        }
        
        .content>ul>li>span {
            line-height: 45px;
            margin-left: 20px;
            color: #454545;
        }
        
        .content>ul {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s linear;
        }
        
        ul>li:hover {
            background-color: #F5F7FA;
            color: #409EFE;
        }
        
        .content>ul>li:hover span {
            background-color: #F5F7FA;
            color: #409EFE;
        }
        
        .content .two {
            display: none;
            transition: all 1s linear;
        }
        
        .content .three {
            display: none;
            transition: all 1s linear;
        }
        
        .inputs_button {
            background-color: white;
            border: 1px gray solid;
        }
        
        .tishi {
            color: gray;
            height: 45px;
            line-height: 45px;
        }
        /* 三级下拉箭头 */
        
        .icon-arrow-down {
            position: absolute;
            top: 0px;
            right: 10px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>编辑功能</h2>
        <div class="row">
            <div class="col-md-2 col-xs-2 input_title">
                <span>功能名称</span>:
            </div>
            <div class="col-md-10 col-xs-10">
                <input type="text" value="" class="inputs" placeholder="功能名称">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-xs-2 input_title">
                <span>功能编码</span>:
            </div>
            <div class="col-md-10 col-xs-10">
                <input type="text" value="" class="inputs" placeholder="功能编码">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-xs-2 input_title">
                <span>下级分类</span>:
            </div>
            <div class="col-md-10 col-xs-10">
                <!-- 三级下拉 -->
                <div class="input-group">
                    <input onclick="btnF()" class="inputs inputs_button" value="请选择分类" type="button"><span class="iconfont icon-arrow-down"></span></input>
                    <div class="content">
                        <ul class="clear one">
                        </ul>
                        <ul class="clear two">
                        </ul>
                        <ul class="clear three">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-xs-2 input_title">
                <span>状态</span>:
            </div>
            <div class="col-md-10 col-xs-10">
                <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1 col-xs-1 input_title"></div>
            <div class="col-md-4 col-xs-4">
                <button class="submit">提交</button><button class="cancel">取消</button>
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            $('#my_time').append('' + myTime + '')
        }
        let arrFen = [{
            btn1: '一级分类',
            btn2: '二级分类',
            btn3: '三级分类'
        }, {
            btn1: '一级分类',
            btn2: '二级分类',
            btn3: '三级分类'
        }, {
            btn1: '一级分类',
            btn2: '二级分类',
            btn3: '三级分类'
        }, {
            btn1: '一级分类',
            btn2: '二级分类',
            btn3: '三级分类'
        }, ]

        function btnF() {
            $('.content').css({
                'display': 'block'
            })
        }

        function fenlei(data) {
            $.each(data, (index, item) => {
                $('.one').append(`
    <li class="yi"><span>${item.btn1}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
                $('.two').append(`
    <li class="er"><span>${item.btn2}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
                $('.three').append(`
    <li class="san"><span>${item.btn3}
      </span></li>
   `)
            })
        }
        fenlei(arrFen)
        $('.one').on('click', '.yi', function() {
            $('.two').find('li:last-child').css('visibility', 'hidden')
            $('.two').css({
                "display": 'block',
                "left": '190px'
            })
            for (let i = 0; i < $('.yi').length; i++) {
                $('.yi').eq(i).css({
                    "background-color": "#FFFFFF",
                })
                $('.yi').eq(i).find("span").css({
                    "color": "#454545",
                    "font-weight": "200"
                })
            }
            $(this).css({
                "background-color": "#F5F7FA",
            })
            $(this).find("span").css({
                "color": "#409EFE",
                "font-weight": "900"
            })
        })
        $('.two').on('click', '.er', function() {


            for (let i = 0; i < $('.er').length; i++) {
                $('.er').eq(i).css({
                    "background-color": "#FFFFFF",
                })
                $('.er').eq(i).find("span").css({
                    "color": "#454545",
                    "font-weight": "200"
                })

            }
            $(this).css({
                "background-color": "#F5F7FA",
            })
            $(this).find("span").css({
                "color": "#409EFE",
                "font-weight": "900"
            })
            $('.three').css({
                "display": 'block',
                "left": '380px'
            })
        })
        $(".three").on('click', '.san', function() {
            for (let i = 0; i < $('.san').length; i++) {
                $('.san').eq(i).css({
                    "background-color": "#FFFFFF",
                })
                $('.san').eq(i).find("span").css({
                    "color": "#454545",
                    "font-weight": "200"
                })
            }
            $(this).css({
                "background-color": "#F5F7FA",
            })
            $(this).find("span").css({
                "color": "#409EFE",
                "font-weight": "900"
            })
            $($(this).parent().parent()[0]).css('display', 'none')
        })
    </script>
    <script src="../../javaScript/quanXianGuanLi/anNiu.js"></script>

</html>